<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-2.1.1.min.js"></script>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			width: 100%;
			height: 100%;
			background: url(img/dmbg.png)
				/* no-repeat center center */
			;
			/*background-size: cover;*/
			/* 
			background-attachment: fixed; */
			background-color: #CCCCCC;
			background-repeat:no-repeat ;
			background-size:100% 100%;
			background-attachment: fixed;
		}

		#head {
			position: relative;
			width: 100%;
			height: 90px;
		}

		.header-box {
			width: calc(100% - 100px);
			height: 100%;
			margin: 0 auto;
		}

		.header-box div {
			float: left;
		}

		.log {
			height: 100%;
			width: 150px;
			background: url(img/HaiBaLogo.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		#headline {
			height: 100%;
			width: calc(100% - 300px);
			color: #FFFFFF;
		}

		.acname {
			font-size: 30px;
			margin-top: 3%;
			margin-left:20%;
			width: 50%;
		}
	</style>
	<body>
		<div id="head">
			<div class="header-box">
				<div class="log"></div>
				<div id="headline">
					<div class="acname"><marquee behavior="scroll" direction="left" width="100%" height="100%">
{{actibityInfo.activityName}}</marquee></div>
					<div style="font-size: 30px;margin-top: 4%;float: right;"><span class="acnum">{{actibityInfo.msgNum}}</span><span style="font-size: 15px;">条消息</span></div>
				</div>
				<div class="log"></div>
			</div>
		</div>
	</body>
	<script>
		var activityId = localStorage.getItem("activityId");
		console.log(activityId);
		new Vue({
			el: '.header-box',
			data: {
				actibityInfo: [],
			},
			created: function() {
				//为了在内部函数能使用外部函数的this对象，要给它赋值了一个名叫self的变量。
				var self = this;
				$.ajax({
					/*本地url*/
					url: 'http://localhost:4396/server/activity/getActivityById?activityId=' + activityId,
					type: 'get',
					data: {},
					dataType: 'json'
				}).then(function(res) {
					console.log(res);
					//把从json获取的数据赋值给数组
					self.actibityInfo = res.data;
				}).fail(function() {
					console.log('失败');
				})
			},
		});
	</script>
</html>
